<!-- 编程题 -->
<template>
    <div>
        <!-- 第一部分 -->
        <el-row class="Header">
            <el-col :span="12">
                <div>
                    <el-input placeholder="请输入题目编号 E-xxx" v-model="params.questionNumber" clearable>
                        <el-select v-model="params.chapter" slot="prepend" placeholder="请选择">
                            <el-option v-for="(item,index) in chapters" :key="index"
                                :label="item.chapterNumber+item.description" :value="item.id"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click="getEncodeQuestionlist"></el-button>
                    </el-input>
                </div>
            </el-col>

            <el-col :span="12">
                <div class="addChooseButton">
                    <el-button type="primary" @click="AddEncodeQuestionFold=true">添加编程题</el-button>
                </div>
            </el-col>
        </el-row>

        <!-- 第二部分，表格部分 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="100"></el-table-column>
            <el-table-column label="章节" width="100">
                <template slot-scope="scoped">
                    <span>第{{scoped.row.chapter}}章</span>
                </template>
            </el-table-column>
            <el-table-column label="题目编号" prop="questionNumber" width="100"></el-table-column>
            <el-table-column label="题目简述" prop="title"></el-table-column>
            <el-table-column label="通过/提交人数" width="140">
                <template slot-scope="scoped">
                    {{scoped.row.pass}}/{{scoped.row.submit }}
                </template>
            </el-table-column>
            <el-table-column label="通过率" width="140">
                <template slot-scope="scoped">
                    {{scoped.row.submit===0?0:((scoped.row.pass/scoped.row.submit)*100).toFixed(2)}}%
                </template>
            </el-table-column>
            <!-- 折叠的选项区域 -->
            <el-table-column label="查看" type="expand">
                <template slot-scope="props" class="optionView">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="题目描述：" class="description">
                            <span>{{ props.row.description }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="提示：" class="suggest" v-if="props.row.suggest">
                            <span>{{ props.row.suggest }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="结果示例:">
                            <el-button @click="viewEncodeExample(props.row.id)">查看</el-button>
                            <el-button @click="viewAddEncodeExample(props.row.id)">添加</el-button>
                        </el-form-item>
                        <el-form-item label="测试用例">
                            <el-button @click="viewEncodeTest(props.row.id)">查看</el-button>
                            <el-button @click="AddEncodeTest(props.row.id)">添加</el-button>
                        </el-form-item>
                        <br>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
                <template slot-scope="scoped">
                    <el-button type="primary" icon="el-icon-edit" @click="viewEditEncodeQuestion(scoped.row.id)"
                        circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle
                        @click="deleteEncodeQuestion(scoped.row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 修改编程题的对话框 -->
        <el-dialog title="修改题目" :visible.sync="editEncodeQuestionFold" width="50%"
            :before-close="handleeditEncodeQuestionClose">
            <!-- form 表单 -->
            <el-form :model="UpdateQuestionparam" :rules="rules" ref="UpdateeditEncodeQuestionRef" label-width="100px"
                class="demo-ruleForm">
                <!-- 题目编号 -->
                <el-form-item label="题目编号">
                    <el-input disabled v-model="UpdateQuestionparam.questionNumber"></el-input>
                </el-form-item>
                <!-- 章节选择 -->
                <el-form-item label="章节选择" prop="chapter">
                    <el-select disabled v-model="UpdateQuestionparam.chapter" placeholder="请选择章节">
                        <el-option v-for="(item,index) in chapters" :key="index"
                            :label="item.chapterNumber+item.description" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 题目描述 -->
                <el-form-item label="题目" prop="title">
                    <el-input v-model="UpdateQuestionparam.title"></el-input>
                </el-form-item>
                <el-form-item label="题目描述" prop="description">
                    <el-input type="textarea" autosize maxlength="255"
                        v-model="UpdateQuestionparam.description"></el-input>
                </el-form-item>
                <el-form-item label="题目提示" prop="title">
                    <el-input v-model="UpdateQuestionparam.suggest"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editQuestion">提交</el-button>
            </span>
        </el-dialog>


        <!-- 第三部分 -->
        <!-- 分页查询 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="params.currentPage" :page-sizes="[5, 8, 10]" :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>


        <!-- 对话框区域 -->
        <!-- 1.查看结果示例的对话框 -->
        <el-dialog title="结果示例" :visible.sync="encodeExampleFold" width="50%" :before-close="handleencodeExampleClose">
            <div class="el-dialog_body">
                <el-input placeholder="请输入内容" :disabled="InputDisabledFold" v-model="encodeExampleData.input">
                    <template slot="prepend">输入：</template>
                </el-input>
                <el-input placeholder="请输入内容" :disabled="InputDisabledFold" v-model="encodeExampleData.output">
                    <template slot="prepend">输出：</template>
                </el-input>
                <el-input placeholder="请输入内容" :disabled="InputDisabledFold" v-model="encodeExampleData.explain">
                    <template slot="prepend">解释：</template>
                </el-input>
                <!-- 分条查看 -->
                <div class="encodeExampleOrderChange">
                    <button @click="encodeExampleOrder>1?encodeExampleOrder = encodeExampleOrder-1:0">上一个</button>
                    <span>第 {{encodeExampleOrder}} 条，共{{encodeExampleNumber}}条</span>
                    <button
                        @click="encodeExampleOrder<encodeExampleNumber?encodeExampleOrder = encodeExampleOrder+1:0">下一个</button>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">

                <el-button type="danger" @click="deleteencodeExample" style="margin-right:350px">删除该结果示例</el-button>

                <el-button type="primary" v-if="InputDisabledFold===true" @click="InputDisabledFold=false">编
                    辑</el-button>
                <el-button type="primary" v-if="InputDisabledFold===false"
                    @click="InputDisabledFold=true">取消编辑</el-button>
                <el-button type="primary" v-if="InputDisabledFold===false" @click="updateEncodeExampleById">提
                    交</el-button>
                <el-button type="primary" v-if="InputDisabledFold===true" @click="handleencodeExampleClose">关
                    闭</el-button>
            </span>
        </el-dialog>

        <!-- 添加结果示例 -->
        <el-dialog class="addResultExple" title="添加结果示例" :visible.sync="addencodeExampleFold" width="50%"
            :before-close="handleAddEncodeExampleClose">
            <el-input placeholder="请输入内容" v-model="AddencodeExampleData.input">
                <template slot="prepend">输入：</template>
            </el-input>
            <el-input placeholder="请输入内容" v-model="AddencodeExampleData.output">
                <template slot="prepend">输出：</template>
            </el-input>
            <span style="font-size: 12px; margin-bottom: 10px;">输出内容有换行请使用#代替</span>
            <el-input placeholder="请输入内容" v-model="AddencodeExampleData.explain">
                <template slot="prepend">解释：</template>
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addencodeExample">添 加</el-button>
            </span>
        </el-dialog>

        <!-- 查看测试示例的对话框 -->
        <el-dialog title="测试用例" :visible.sync="encodeTestFold" width="60%" :before-close="handleEncodeTestClose">
            <!-- 输入信息的div -->
            <div class="input">
                <span>输入参数：</span>
                <el-button :disabled="TestInputDisabledFold" @click="addEncodeTest">添加参数</el-button>
                <br>
                <div v-for="(item,index) in encodeTest.input" :key="index">
                    <span>第{{item.paramOrder}}个参数：</span>
                    <el-input v-model="item.data" :disabled="TestInputDisabledFold" style="margin: 10px 0;">
                        <el-select :disabled="TestInputDisabledFold" v-model="item.type" slot="prepend">
                            <el-option v-for="item in testType" :key="item.id" :label="item.type" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-button @click="deleteEncodeTestInput(item.paramOrder)" :disabled="TestInputDisabledFold"
                            slot="append" icon="el-icon-delete"></el-button>
                    </el-input>
                </div>
            </div>
            <!-- 输出信息的div -->
            <div class="output">
                <br>
                <el-input :disabled="TestInputDisabledFold" v-model="encodeTest.output">
                    <el-button disabled slot="prepend"> 输出信息： </el-button>
                </el-input>
            </div>

            <div class="encodeExampleOrderChange">
                <button @click="encodeTestOrder>1?encodeTestOrder = encodeTestOrder-1:0">上一个</button>
                <span>第 {{encodeTestOrder}} 条，共{{encodeTestNumber}}条</span>
                <button @click="encodeTestOrder<encodeTestNumber?encodeTestOrder = encodeTestOrder+1:0">下一个</button>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="deleteencodeTest" style="margin-right:450px">删除该结果示例</el-button>

                <el-button type="primary" v-if="TestInputDisabledFold===true" @click="TestInputDisabledFold=false">编
                    辑</el-button>
                <el-button type="primary" v-if="TestInputDisabledFold===false"
                    @click="TestInputDisabledFold=true">取消编辑</el-button>
                <el-button type="primary" v-if="TestInputDisabledFold===false" @click="updateEncodeTestById">提
                    交</el-button>
                <el-button type="primary" v-if="TestInputDisabledFold===true" @click="handleEncodeTestClose">关
                    闭</el-button>
            </span>
        </el-dialog>

        <!-- 添加测试用例的对话框 -->
        <el-dialog title="添加测试用例" :visible.sync="AddencodeTestFold" width="60%" :before-close="handleAddencodeTestClose">
            <!-- 输入信息的div -->
            <div class="input">
                <span>输入参数：</span>
                <el-button @click="AddencodeTestAddParam">添加参数</el-button>
                <br>
                <div v-for="(item,index) in AddencodeTest.input" :key="index">
                    <span>第{{item.paramOrder}}个参数：</span>
                    <el-input placeholder="请输入内容" v-model="item.data" style="margin: 10px 0;">
                        <el-select v-model="item.type" slot="prepend" placeholder="请选择">
                            <el-option v-for="item in testType" :key="item.id" :label="item.type" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-button @click="deleteAddEncodeTest(item.paramOrder)" slot="append"
                            icon="el-icon-delete"></el-button>
                    </el-input>
                </div>
            </div>
            <!-- 输出信息的div -->
            <div class="output">
                <br>
                <el-input placeholder="请输入内容，换行符请使用 # 代替" v-model="AddencodeTest.output">
                    <el-button slot="prepend"> 输出信息： </el-button>
                </el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="AddEncodeTestTo"> 提交 </el-button>
            </span>
        </el-dialog>

        <!-- 添加题目对话框 -->
        <el-dialog title="添加题目" :visible.sync="AddEncodeQuestionFold" width="50%"
            :before-close="handleAddEncodeQuestionClose">
            <!-- form 表单 -->
            <el-form :model="AddQuestionparam" :rules="rules" ref="AddEncodeQuestionRef" label-width="100px"
                class="demo-ruleForm">
                <!-- 题目编号 -->
                <el-form-item label="题目编号" prop="questionNumber">
                    <el-input v-model="AddQuestionparam.questionNumber"></el-input>
                </el-form-item>
                <!-- 章节选择 -->
                <el-form-item label="章节选择" prop="chapter">
                    <el-select v-model="AddQuestionparam.chapter" placeholder="请选择章节">
                        <el-option v-for="(item,index) in chapters" :key="index"
                            :label="item.chapterNumber+item.description" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 题目描述 -->
                <el-form-item label="题目" prop="title">
                    <el-input autosize maxlength="255" v-model="AddQuestionparam.title"></el-input>
                </el-form-item>
                <el-form-item label="题目描述" prop="description">
                    <el-input type="textarea" autosize v-model="AddQuestionparam.description"></el-input>
                </el-form-item>
                <el-form-item label="题目提示" prop="suggest">
                    <el-input v-model="AddQuestionparam.suggest"></el-input>
                </el-form-item>
                <br>
                <span
                    style="text-align: center; padding-top: 20px; margin-left: 150px; color: red;">结果示例和测试用例因为篇幅有限请到具体的题目中添加</span>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="AddresetForm">重置</el-button>
                <el-button @click="AddQuestion">提交</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        mounted() {
            this.getencodeTestDataType()
        },
        watch: {
            'params.chapter': { // 监视param对象中的 chapterId 章节id 属性变化  
                handler(newVal) {
                    // TODO 注意，这里的这个 questionNumber 清空之后还要再发一次请求。后面再处理
                    this.params.questionNumber = ""
                    // 因为  param.chapterId 发生变化 这里就会自动发送一次请求
                    this.getEncodeQuestionlist()
                },
            },
            'params.questionNumber': { // 监视param对象中的 questionNumber 属性是否为空 
                handler(newVal) {
                    if (newVal === null || newVal === "") {
                        this.getEncodeQuestionlist()
                    }
                },
            },
            encodeExampleOrder: {  // 监视结果示例的序号是否发生变化，如果发生变化
                handler(newVal) {
                    if (this.encodeExampleFold) {
                        this.getEncodeExampleById(this.EncodeExampleId)
                        this.InputDisabledFold = true
                    }
                }
            },
            encodeTestOrder: {  // 监视结果示例的序号是否发生变化，如果发生变化
                handler(newVal) {
                    if (this.encodeTestFold) {
                        this.getEncodeTest(this.encodeTestId)
                        this.TestInputDisabledFold = true
                    }
                }
            }
        },
        created() {
            this.getChapter()
            this.getEncodeQuestionlist()
        },
        data() {
            // 判断编码是否重复
            var cf = (value) => {
                for (let i = 0; i < this.tableData.length; i++) {
                    if (value === this.tableData[i].questionNumber) {
                        return true
                    }
                }
                return false
            }
            // 编号表单验证
            var questionNumberRule = (rule, value, callback) => {
                var regex = /^E-[A-F0-9][0-9]{2,}$/;
                if (!value) {
                    return callback(new Error('请输入编号'));
                } else if (!regex.test(value)) {
                    return callback(new Error('编码格式不满足'));
                } else if (cf(value)) {
                    callback(new Error('编码已经存在'));
                } else {
                    callback();
                }
            };
            return {
                // 章节信息
                chapters: [],
                // 分页查询参数
                params: {
                    questionNumber: "",      // 搜索框内容，表示题目编号
                    chapter: 1,              // 章节id
                    currentPage: 1,          // 页数
                    pageSize: 5              // 每页记录数
                },
                // 页面数据总数
                total: null,
                // 表格数据
                tableData: [],
                // 结果示例数据
                encodeExampleData: { id: null, input: "", output: "", explain: "" },
                // 添加结果示例数据
                AddencodeExampleData: { encodeId: null, input: null, output: null, explain: null },
                // 结果示例数量
                encodeExampleNumber: 0,
                // 查看第几条数据
                encodeExampleOrder: 1,
                // 修改题目的数据对象
                UpdateQuestionparam: {
                    id: null,
                    questionNumber: "",
                    chapter: null,
                    title: "",
                    description: "",
                    suggest: ""
                },

                // 中间数据
                // 储存题目id，用于在对话框使用
                EncodeExampleId: null,
                // 控制输入框是否可以开始编辑,默认为true，不能修改
                InputDisabledFold: true,


                // 控制对话框的开关
                // 修改编程题的开关
                editEncodeQuestionFold: false,
                // 查看编程题的结果示例的开关
                encodeExampleFold: false,
                // 添加编程结果示例
                addencodeExampleFold: false,

                // 表单验证
                rules: {
                    questionNumber: [{ validator: questionNumberRule, trigger: 'blur' }],
                    description: [{ required: true, message: '请输入题目描述', trigger: 'blur' },],
                    title: [{ required: true, message: '题目不能为空', trigger: 'blur' },],
                    chapter: [{ required: true, message: '请选择章节', trigger: 'blur' },],
                    title: [{ required: true, message: '请输入题目数据提示', trigger: 'blur' },],
                    suggest: [{ required: true, message: '请输入题目提示', trigger: 'blur' },]
                },


                // 测试用例
                // 题目id（测试专用）
                encodeTestId: null,
                // 控制查看对话框的开关
                encodeTestFold: false,
                // 测试用例展示修改数据
                encodeTest: {
                    id: 0,
                    output: "",
                    input: [{ id: null, type: null, data: "", paramOrder: null }],
                },
                // 数据类型信息
                testType: [],
                // 序号（测试用例）
                encodeTestOrder: 1,
                // 总个数
                encodeTestNumber: 0,
                // 是否可以编辑
                TestInputDisabledFold: true,


                // 添加测试用例
                // 控制对话框的开关
                AddencodeTestFold: false,
                // 题目id保存
                AddEncodeId: null,
                // 添加测试数据
                AddencodeTest: {
                    id: 0,// 保存为题目id
                    output: "",
                    input: [{ type: null, data: "", paramOrder: 1 }],
                },

                // 添加编程题
                // 对话框的打开与关闭
                AddEncodeQuestionFold: false,
                // 数据
                AddQuestionparam: {
                    questionNumber: "",
                    chapter: null,
                    title: "",
                    description: "",
                    suggest: ""
                }
            };
        },
        methods: {
            // 获取章节信息
            async getChapter() {
                const { data: res } = await this.$axios.get("/chapter/getChapter")
                this.chapters = res.data
            },
            // 分页查询，发送请求
            async getEncodeQuestionlist() {
                const { data: res } = await this.$axios.post("/encode/getEncodeQuestion", this.params)
                this.tableData = res.data.records
                this.total = res.data.total
            },

            // 页面数据发生变化
            handleSizeChange(newPageSize) {
                this.params.pageSize = newPageSize
                this.getEncodeQuestionlist()
            },
            handleCurrentChange(newCurrent) {
                this.params.currentPage = newCurrent
                this.getEncodeQuestionlist()
            },

            // 结果示例代码
            // 根据题目id获取改题目的结果示例
            async getEncodeExampleById(id) {
                const { data: res } = await this.$axios.get("/encode/getEncodeExample", {
                    params: {
                        id: id,
                        order: this.encodeExampleOrder
                    }
                })
                if (res.data === null) {
                    this.encodeExampleFold = false
                    return this.$message.error("该题目还没有结果示例，请添加结果示例")
                }
                if (res.code === 200) {
                    return this.encodeExampleData = res.data
                } else {
                    return this.$message.error("网络错误")
                }
            },
            // 获取结果示例数量
            async getEncodeExampleNumber(id) {
                const { data: res } = await this.$axios.get("/encode/getEncodeExampleNumber", {
                    params: {
                        id: id
                    }
                })
                if (res.data === null || res.data === 0) {
                    return this.$message("还没有结果示例，请赶紧添加结果用例")
                } else {
                    this.encodeExampleFold = true
                    this.getEncodeExampleById(id)
                    this.EncodeExampleId = id
                    this.encodeExampleNumber = res.data
                }
            },
            // 查看结果示例
            viewEncodeExample(id) {
                this.getEncodeExampleNumber(id)
            },
            // 结果示例关闭前的操作
            handleencodeExampleClose() {
                this.encodeExampleData = { id: null, input: "", output: "", explain: "" }
                this.encodeExampleFold = false
                this.EncodeExampleId = null
                this.InputDisabledFold = true
                this.encodeExampleNumber = 0
                this.encodeExampleOrder = 1
            },
            // 提交修改信息，将新的结果示例发给后端
            async updateEncodeExampleById() {
                const { data: res } = await this.$axios.put("/encode/updateEncodeExample", this.encodeExampleData)
                if (res.code === 200) {
                    this.InputDisabledFold = true
                    this.getEncodeExampleById(this.EncodeExampleId)
                    return this.$message.success("修改成功")
                }
            },
            // 删除结果示例
            async deleteencodeExample() {
                const { data: res } = await this.$axios.delete("/encode/deleteEncodeExample", {
                    params: {
                        id: this.encodeExampleData.id,
                        encodeId: this.EncodeExampleId
                    }
                })
                if (res.code === 200) {
                    this.handleencodeExampleClose()
                    return this.$message.success("删除成功")
                }
                return this.$message.error("删除失败")
            },

            // 添加编程示例
            // 打开对话框
            viewAddEncodeExample(id) {
                this.addencodeExampleFold = true
                this.AddencodeExampleData.encodeId = id
            },
            // 对话框关闭前的操作
            handleAddEncodeExampleClose() {
                this.AddencodeExampleData = { encodeId: null, input: null, output: null, explain: null }
                this.addencodeExampleFold = false
            },
            async addencodeExample() {
                const { data: res } = await this.$axios.put("/encode/AddEncodeExample", this.AddencodeExampleData)
                if (res.code === 200) {
                    this.handleAddEncodeExampleClose()
                    return this.$message.success("添加成功")
                }
                return this.$message.error("添加失败")
            },


            // 修改编程题的对话框
            // 打开对话框
            viewEditEncodeQuestion(id) {
                var data = this.tableData.find((item) => item.id === id)
                this.UpdateQuestionparam.id = data.id
                this.UpdateQuestionparam.questionNumber = data.questionNumber
                this.UpdateQuestionparam.chapter = data.chapter
                this.UpdateQuestionparam.title = data.title
                this.UpdateQuestionparam.description = data.description
                this.UpdateQuestionparam.suggest = data.suggest
                this.editEncodeQuestionFold = true
            },
            // 对话框关闭前的操作
            handleeditEncodeQuestionClose() {
                this.$refs.UpdateeditEncodeQuestionRef.resetFields();
                this.editEncodeQuestionFold = false
            },
            // 修改题目
            editQuestion() {
                this.$refs.UpdateeditEncodeQuestionRef.validate(async valid => {
                    if (!valid) return this.$message.error("请完善表格")
                    const { data: res } = await this.$axios.put('/encode/updateQuestion', this.UpdateQuestionparam)
                    if (res.code === 200) {
                        this.getEncodeQuestionlist()
                        this.handleeditEncodeQuestionClose()
                        return this.$message.success("修改成功")
                    } else {
                        return this.$message.error("你输入的信息有误")
                    }
                })
            },

            // 测试用例
            viewEncodeTest(id) {
                this.getEncodeTestNumber(id)
            },
            // 对话框关闭前的
            handleEncodeTestClose() {
                this.encodeTestFold = false
                this.encodeTestId = null
                this.encodeTestOrder = 1        // 保证下一次打开查询的是第一条数据
                this.TestInputDisabledFold = true
            },
            // 获取数据类型信息
            async getencodeTestDataType() {
                const { data: res } = await this.$axios.get("/encode/getType")
                if (res.code === 200) {
                    this.testType = res.data
                }
            },
            // 根据id获取测试用例的数量
            async getEncodeTestNumber(id) {
                const { data: res } = await this.$axios.get("/encode/getEncodeTestNumber", {
                    params: {
                        id: id
                    }
                })
                if (res.data === 0) {
                    return this.$message("还没有测试用例，请赶紧添加测试用例")
                }
                if (res.code === 200) {
                    this.encodeTestFold = true // 打开对话框
                    this.encodeTestId = id// 将题目id保存为常量
                    this.getEncodeTest(id)// 获取当条数据
                    this.encodeTestNumber = res.data
                }
            },
            // 根据id获取测试用例数据
            async getEncodeTest(id) {
                const { data: res } = await this.$axios.get("/encode/getEncodeTest", {
                    params: {
                        id: id,
                        order: this.encodeTestOrder
                    }
                })
                if (res.code === 200) {
                    this.encodeTest = res.data
                }
            },
            // 修改测试用例请求发送
            async updateEncodeTestByIdToPut() {
                const { data: res } = await this.$axios.put("/encode/updateEncodeTest", this.encodeTest)
                if (res.code === 200) {
                    this.handleEncodeTestClose()
                    return this.$message.success("修改成功")
                }
            },
            // 修改测试用例，数据验证
            updateEncodeTestById() {
                if (this.encodeTest.output === null || this.encodeTest.output === "") {
                    return this.$message.error("请完善输出信息")
                }
                for (let i = 0; i < this.encodeTest.input.length; i++) {
                    if (this.encodeTest.input[i].data === null || this.encodeTest.input[i].data === "") {
                        return this.$message.error("请完善输入参数信息")
                    }
                }
                this.updateEncodeTestByIdToPut()
            },
            // 给测试用例的数据重新按照数组的顺序编号
            OrderEncodeTest() {
                for (let i = 0; i < this.encodeTest.input.length; i++) {
                    this.encodeTest.input[i].paramOrder = i + 1
                }
            },
            // 添加测试用例的输入参数
            addEncodeTest() {
                this.encodeTest.input.push({
                    id: 0, type: 1, data: "", paramOrder: 0
                })
                this.OrderEncodeTest()
            },
            // 删除测试用例的input的参数
            deleteEncodeTestInput(paramsOrder) {
                this.encodeTest.input.splice(paramsOrder - 1, 1)
                this.OrderEncodeTest()
            },
            // 删除测试用例
            async deleteencodeTest() {
                const { data: res } = await this.$axios.delete("/encode/deleteEncodeTest", {
                    params: {
                        id: this.encodeTest.id
                    }
                })
                if (res.code === 200) {
                    this.handleEncodeTestClose()
                    return this.$message.success("删除成功")
                } else if (res.code === 513) {
                    return this.$message.error("不能删除。必须保留一个测试用例")
                } else {
                    return this.$message.error("网络错误")
                }
            },

            // 添加测试用例
            // 对话框关闭前的操作
            handleAddencodeTestClose() {
                this.AddEncodeId = null
                this.AddencodeTestFold = false
                this.AddencodeTest = { id: null, output: "", input: [{ type: null, data: "", paramOrder: 1 }] }
            },
            // 打开对话框
            AddEncodeTest(id) {
                this.AddEncodeId = id
                this.AddencodeTest.id = id
                this.AddencodeTestFold = true
            },
            // 排序
            AddencodeTestOrder() {
                for (let i = 0; i < this.AddencodeTest.input.length; i++) {
                    this.AddencodeTest.input[i].paramOrder = i + 1
                }
            },
            // 添加输入参数
            AddencodeTestAddParam() {
                this.AddencodeTest.input.push({ type: null, data: "", paramOrder: null })
                this.AddencodeTestOrder()
            },
            // 删除参数
            deleteAddEncodeTest(order) {
                this.AddencodeTest.input.splice(order - 1, 1)
                this.AddencodeTestOrder()
            },
            // 添加测试用例
            async AddEncodeTestTo() {
                if (this.AddencodeTest.output === "" || this.AddencodeTest.output === null) {
                    this.$message("请完善输出信息")
                    return false
                }
                for (let i = 0; i < this.AddencodeTest.input.length; i++) {
                    if (this.AddencodeTest.input[i].data === null || this.AddencodeTest.input[i].data === "") {
                        this.$message("请完善参数信息")
                        return false
                    }
                    if (this.AddencodeTest.input[i].type === null || this.AddencodeTest.input[i].type === "") {
                        this.$message("请选择数据格式")
                        return false
                    }
                }
                const { data: res } = await this.$axios.post("/encode/AddEncodeTest", this.AddencodeTest)
                if (res.code === 200) {
                    this.handleAddencodeTestClose()
                    return this.$message.success("添加成功")
                } else {
                    return this.$message.error("网络错误")
                }
            },


            // 添加编程题
            // 对话框关闭前
            handleAddEncodeQuestionClose() {
                this.AddresetForm()
                this.AddEncodeQuestionFold = false
            },
            // 重置
            AddresetForm() {
                this.AddQuestionparam.suggest = ""
                this.$refs.AddEncodeQuestionRef.resetFields();
            },
            // 添加题目
            AddQuestion() {
                this.$refs.AddEncodeQuestionRef.validate(async valid => {
                    if (!valid) return this.$message.error("请完善表格")
                    const { data: res } = await this.$axios.post('/encode/addencode', this.AddQuestionparam)
                    if (res.code === 200) {
                        this.params.chapter = this.AddQuestionparam.chapter
                        this.params.questionNumber = this.AddQuestionparam.questionNumber
                        this.getEncodeQuestionlist()
                        this.handleAddEncodeQuestionClose()
                        return this.$message.success("添加成功")
                    } else if (res.code === 511) {
                        return this.$message.error("编码重复")
                    } else {
                        return this.$message.error("网络错误")
                    }
                })
            },

            // 删除编程题
            deleteEncodeQuestion(id) {
                return this.$message("编程题就别删除了呗")
            }
        }
    }
</script>

<style lang="less" scoped>
    /* 头部样式 */
    .Header {
        margin-bottom: 15px;

        /* 选择框 */
        .el-select {
            width: 300px;
        }

        /* 添加题目按钮 */
        .addChooseButton {
            text-align: right;

            .el-button {
                margin-right: 50px;
            }
        }
    }

    /* 答案选项 */
    .el-form-item {
        margin-bottom: 2px !important;
    }

    /* 折叠区域 */
    /* 题目描述 */
    .description {
        background-color: #e7e9ea !important;

        span {
            margin: 2px 25px !important;
        }
    }

    /* 提示 */
    .suggest {
        span {
            background-color: #f9faf4;
            padding: 10px 0;
            margin: 0;
        }
    }

    /* 对话框的内边界 */
    .el-dialog_body {
        .el-input {
            margin: 5px 0;
        }

        padding: 10px !important;
    }

    /* 修改题目 */
    .demo-ruleForm {
        .el-form-item {
            margin: 15px 0;
        }
    }

    /* 结果示例的条数变化div */
    .encodeExampleOrderChange {
        margin: 20px 20px 0;
        display: flex;
        justify-content: space-between;
    }

    /* 测试用例 */
    .input {
        div {
            .el-select {
                width: 200px;
            }
        }
    }

    .addResultExple {
        .el-input {
            margin-bottom: 10px;
        }
    }
</style>